<template>
<!-- 在线监测首页-设备预警 -->
  <div class="equipment-warn">
    <div class="title blueTitleStyle">设备预警</div>
    <div class="main colcenterbox">
      <div class="warn_box">
        <marquee
          @mouseenter="marqueeEnter"
          @mouseleave="marqueeLeave"
          scrollamount="2"
          direction="up"
          style="width:100%;height:100%;"
        >
          <ul class="warn_list" id="warnList2" :class="{warn_top:animate}">
            <li
              :class="index%2==0?'lione':'litwo'"
              class="startbox"
              v-for="(item, index) in newalarmList"
              :key="index"
            >
              <div class="datetime">
                <div class="startbox" v-if="item.GJSJ">{{item.GJSJ.slice(0,10)}}</div>
                <div class="startbox" v-if="item.GJSJ">{{item.GJSJ.slice(10,20)}}</div>
                <div class="startbox" v-else> </div>
              </div>
              <div class="content">
                <el-tooltip :content="item.BDZMC" placement="top">
                  <span>{{ item.BDZMC+" · " }}</span>
                </el-tooltip>
                <el-tooltip :content="item.GJNR" placement="top">
                  <span>{{item.GJNR}}</span>
                </el-tooltip>
              </div>
              <!-- <span class="spanone" :title="item.time">{{ item.time }}</span>
              <span class="spanone" :title="item.stationName">{{ item.stationName }}</span>
              <span class="spanone" :title="item.deviceName">{{ item.deviceName }}</span>-->
            </li>
          </ul>
        </marquee>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { GetSocketModule } from "@/store/modules/GetSocketData";
import Nodata from "../../../../../components/Nodata/index.vue";
interface objType {
  row: object;
  rowIndex: number;
}
@Component({ components: { Nodata } })
export default class extends Vue {
  //数据状态
  nodata = false;
  tableSelect: Array<object> = [];

  private animate: boolean = false;
  private smartScrollTimer; // 滚动定时器

  // get alarmList() {
  //   var allList = GetSocketModule.AllAuxiliaryPointer || [];
  //   // console.log('allList:',allList);
  //   let fkdata = ["03"];
  //   var arr = [];
  //   allList.forEach((k, j) => {
  //     if (k.isGj === "gj" && fkdata.indexOf(k.xtValue) > -1) {
  //       if (k.time && k.message) {
  //         arr.push(k);
  //       }
  //     }
  //   });
  //   arr = arr.slice(0, 50);
  //   // console.log(arr);
  //   return arr;
  // }
alarmList=[]
  // 表格数据查询
   queryIntegrageAlarmList() {
    let gjly = ["zxjc"];
    let gjlyFetch = gjly.map((v) => {
      let from = {
        gjly: v,
        clzt: 0,
        page: 1,
        size: 200,
      };
      return (this as any).$services.queryIntegrageAlarmList({
        data: from,
        method: "get",
      });
    });
    Promise.all(gjlyFetch).then((res) => {
        console.log(res,321);

      let mapDataErr = [];
      res.forEach((item) => {
        let resultdata = item.data || {};
        let records = resultdata.records || [];
        records.forEach((item) => {
          mapDataErr.push(item);
        });
      });
      this.alarmList = mapDataErr;
    });
  }

  // 监听智能联动滚动列表
  get newalarmList() {
    if (this.alarmList.length < 1) {
      return this.newalarmList2;
    } else {
      return this.alarmList;
    }
  }
  marqueeEnter(event) {
    event.target.stop();
  }
  marqueeLeave(event) {
    event.target.start();
  }
  newalarmList2 = [
  {
      GJSJ: "2020-11-18 08:59:00",
      BDZMC: "220kV天平变电站",
      GJNR: "备用7室温度注意告警 【7.6℃】",
    },
    {
      GJSJ: "2020-11-18 06:36:03",
      BDZMC: "220kV天平变电站",
      GJNR: "备用7室温度注意告警 【7.6℃】",
    },
    {
      GJSJ: "2020-11-18 09:33:40",
      BDZMC: "220kV天平变电站",
      GJNR: "备用7室温度注意告警 【7.6℃】",
    },
    {
      GJSJ: "2020-11-18 07:13:06",
      BDZMC: "220kV天平变电站",
      GJNR: "备用7室温度注意告警 【7.6℃】",
    },
    {
      GJSJ: "2020-11-18 05:13:06",
      BDZMC: "220kV天平变电站",
      GJNR: "备用7室温度注意告警 【7.6℃】",
    },
    {
      GJSJ: "2020-11-18 04:13:06",
      BDZMC: "220kV天平变电站",
      GJNR: "备用7室温度注意告警 【7.6℃】",
    },
    {
      GJSJ: "2020-11-18 03:13:06",
      BDZMC: "220kV天平变电站",
      GJNR: "备用7室温度注意告警 【7.6℃】",
    },

  ];

  // 表格选择事件
  handleSelectionChange(val: any): void {
    // console.log(val);

    this.tableSelect = val;
  }
  // 表格隔行变色
  tableRowClassName({ row, rowIndex }: objType): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 0) {
      return "row1";
    } else {
      return "row2";
    }
  }
  mounted(){
    this.queryIntegrageAlarmList()
  }
}
</script>

<style lang="scss" scoped>
.equipment-warn {
  width: 100%;
  height: 100%;
  .title {
    height: 0.3rem;
  }
  .main {
    width: 100%;
    height: calc(100% - 0.3rem);
    padding: 0.1rem 0.15rem;
    &-title {
      width: 100%;
      height: 0.24rem;
      display: flex;
      justify-content: space-around;
      text-align: center;
      background: rgb(51, 91, 178);
      .item {
        font-size: 0.14rem;
        width: 33%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .warn_box {
      display: block;
      width: 100%;
      height: 100%;
      overflow: hidden;
      li {
        cursor: pointer;
        height: 0.5rem;
        width: 100%;
        margin-bottom: 0.06rem;
        border-radius: 0.04rem;
        padding: 0.06rem 0.16rem;
        background: rgba(15, 81, 81, 0.2);
        div {
          font-size: 0.14rem;
        }
        .datetime {
          width: 1rem;
          height: 100%;

          > div {
            height: 50%;
          }
        }
        .content {
          width: calc(100% - 1rem);
          height: 100%;
          > div {
            height: 50%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
}
</style>